<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>通话记录</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <link rel="stylesheet" href="/static/libs/layui/css/layui.css?t=1629677917965"  media="all">
        <style>
            .layui-form-label{padding:9px 0;}
            .table-adminlog tr td {
                word-break: break-all;
            }
            .chat{
                padding:20px;
                /*background: #efefef;*/
            }
            .chat .item{
                display: flex;
                margin-bottom: 10px;               
            }
            .item-p{ background: #efefef;padding:10px;}
            .item-left{
                flex-direction: row;
            }
            .item-left .item-p{margin-right: 50px;}
            .item-right .item-p{margin-left: 50px;}
            .avatar-txt{
                display: flex;align-items: center;justify-content: center;width: 40px;height: 40px;border-radius: 50%;background: #18bc9c;color:#fff;
                
            }
            .item-left .avatar-txt{margin-right: 10px;}
            .item-right .avatar-txt{margin-left: 10px;}
            .item-right{
                flex-direction: row-reverse;
            }
        </style>
        <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
    </head>
    <body>
        <div class="layui-main" style="margin:auto;width:90%;">            
            <form class="layui-form" action="" method="post" onsubmit="return false" style='margin-top:20px;'>

                <div class="layui-form-item">
                    <label class="layui-form-label">通话记录</label>
                    <div class="layui-input-block">
                        <input type="text" name="name" value="{$row.callInstanceId|default=''}" autocomplete="off" class="layui-input">
                    </div>
                </div>



                <div class="layui-form-item">
                    <label class="layui-form-label">任务名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="code"  value="{$row.task_name|default=''}" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">客户姓名</label>
                    <div class="layui-input-block">
                        <input type="text" name="legal_persona_wechat" value="{$row.customerName|default=''}" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">客户电话</label>
                    <div class="layui-input-block">
                        <input type="text" name="legal_persona_name" value="{$row.customerTelephone|default=''}" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">客户意向</label>
                    <div class="layui-input-block">
                        <input type="text" name="component_phone" value="{$row.yixiang_txt|default=''}" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <!--<label class="layui-form-label">通话记录</label>-->                    
                    <div class="layui-input-block" style="margin-left:0;text-align: center;">
                        <audio id="myAudio" src="{$row.luyinOssUrl|default=''}" controls class="layui-audio"></audio>
                    </div>
                </div>


            </form>

        </div>
      
        <div class="chat">
            {foreach name="row.chat_list" item="vo"}
                {eq name='vo.speaker' value='AI'}
                <div class="item item-right" >
                    <div>
                        <p class="avatar-txt" >AI</p>
                    </div>
                    <div class="item-p">
                        {$vo.content}
                    </div>
                </div>
                {else/}
                  <div class="item item-left" >
                    <div>
                        <p class="avatar-txt" >TA</p>
                    </div>
                    <div class="item-p">
                        {$vo.content}
                    </div>
                </div>
                {/eq}
            {/foreach}
            
        </div>


        <script src="__STATIC__/js/jquery.js" charset="utf-8"></script>
        <script src="/static/libs/layui/layui.js" charset="utf-8"></script>
        <!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
        <script>
            layui.use(['form', 'audio'], function () {
                var form = layui.form
                        , layer = layui.layer, audio = layui.audio;
                audio.init('myAudio'); // 初始化音频播放器




            });
        </script>

    </body>
</html>

